interface StyleTemplate {
  [key: string]: {
    [key: string]: any;
  };
}

// 前端存储时的组织方式（非数据库列表存储，对象存储方便索引，但不方便抽离）
const styleTemplates: StyleTemplate = {
  point: {
    singleValueRender: {
      singleValueRender: {
        layout: {
          visibility: 'visible',
        },
        outline: 'closed',
        paint: {
          'circle-blur': 0,
          'circle-color': '#ff0000',
          'circle-radius': 10,
          'circle-opacity': 100,
        },
      },
      singleValueRender_outline: {
        layout: {
          visibility: 'visible',
        },
        outline: 'open',
        paint: {
          'circle-blur': 0,
          'circle-color': '#8cff00',
          'circle-radius': 10,
          'circle-opacity': 100,
          'circle-stroke-color': '#ff0000',
          'circle-stroke-width': 5,
          'circle-stroke-opacity': 100,
        },
      },
    },
    uniqueValueRender: {
      uniqueValueRender_random: {
        colorRamp: 'random',
        renderField: '',
        renderParam: {
          layout: {
            visibility: 'visible',
          },
          outline: 'closed',
          paint: {
            'circle-blur': 0,
            'circle-radius': 10,
            'circle-opacity': 100,
          },
        },
      },
    },
    hierarchicalRender: {
      hierarchicalRender_color: {
        colorRamp: 'gradual_ramp1',
        renderField: '',
        hierarchicalMethod: 'hierarchical_color',
        level: 3,
        renderParam: {
          layout: {
            visibility: 'visible',
          },
          outline: 'closed',
          paint: {
            'circle-blur': 0,
            'circle-radius': 10,
            'circle-opacity': 100,
          },
        },
      },
      hierarchicalRender_radius: {
        renderField: '',
        hierarchicalMethod: 'hierarchical_radius',
        level: 3,
        radiusRange: [4, 10],
        renderParam: {
          layout: {
            visibility: 'visible',
          },
          outline: 'closed',
          paint: {
            'circle-color': '#ff0000',
            'circle-blur': 0,
            'circle-opacity': 100,
          },
        },
      },
    },
    gradualValueRender: {
      gradualValueRender_asc: {
        colorRamp: 'gradual_ramp_red',
        renderField: '',
        sort: 'asc',
        renderParam: {
          layout: {
            visibility: 'visible',
          },
          outline: 'closed',
          paint: {
            'circle-blur': 0,
            'circle-radius': 10,
            'circle-opacity': 100,
          },
        },
      },
    },
    heatMap: {
      heatMap: {
        // colorRamp: "Yellow-Green-Blue",
        colorRamp: 'Yellow-Red-Purple',
        keepingLayer: false,
        zoomRange: [0, 14],
        weightField: '',
        'heatmap-weight': {
          range: [0, 4],
        },
        paint: {
          'heatmap-intensity': {
            mode: 'global',
            value: 2,
          },
          'heatmap-opacity': {
            mode: 'basedZoom',
            range: [1, 0],
          },
          'heatmap-radius': {
            mode: 'basedZoom',
            range: [3, 60],
          },
        },
      },
    },
  },
  line: {
    singleValueRender: {
      singleValueRender: {
        layout: {
          visibility: 'visible',
          'line-cap': 'butt',
          'line-join': 'miter',
        },
        paint: {
          'line-blur': 0,
          'line-color': '#0000ff',
          'line-width': 5,
          'line-gap-width': 0,
          'line-opacity': 100,
          'line-dasharray': [],
        },
      },
      singleValueRender_dashed: {
        layout: {
          visibility: 'visible',
          'line-cap': 'butt',
          'line-join': 'miter',
        },
        paint: {
          'line-blur': 0,
          'line-color': '#0000ff',
          'line-width': 2,
          'line-gap-width': 0,
          'line-opacity': 100,
          'line-dasharray': [2, 2],
        },
      },
      singleValueRender_double_solid: {
        layout: {
          visibility: 'visible',
          'line-cap': 'butt',
          'line-join': 'miter',
        },
        paint: {
          'line-blur': 0,
          'line-color': '#0000ff',
          'line-width': 2,
          'line-gap-width': 2,
          'line-opacity': 100,
          'line-dasharray': [],
        },
      },
    },
    uniqueValueRender: {
      uniqueValueRender_random: {
        colorRamp: 'random',
        renderField: '',
        renderParam: {
          layout: {
            visibility: 'visible',
            'line-cap': 'butt',
            'line-join': 'miter',
          },
          paint: {
            'line-blur': 0,
            'line-width': 5,
            'line-gap-width': 0,
            'line-opacity': 100,
            'line-dasharray': [],
          },
        },
      },
    },
    hierarchicalRender: {
      hierarchicalRender_color: {
        colorRamp: 'gradual_ramp1',
        renderField: '',
        hierarchicalMethod: 'hierarchical_color',
        level: 3,
        renderParam: {
          layout: {
            visibility: 'visible',
            'line-cap': 'butt',
            'line-join': 'miter',
          },
          paint: {
            'line-blur': 0,
            'line-width': 5,
            'line-gap-width': 0,
            'line-opacity': 100,
            'line-dasharray': [],
          },
        },
      },
      hierarchicalRender_radius: {
        renderField: '',
        hierarchicalMethod: 'hierarchical_radius',
        level: 3,
        radiusRange: [4, 10],
        renderParam: {
          layout: {
            visibility: 'visible',
            'line-cap': 'butt',
            'line-join': 'miter',
          },
          paint: {
            'line-blur': 0,
            'line-color': '#0000ff',
            'line-gap-width': 0,
            'line-opacity': 100,
            'line-dasharray': [],
          },
        },
      },
    },
    gradualValueRender: {
      gradualValueRender_asc: {
        colorRamp: 'gradual_ramp_red',
        renderField: '',
        sort: 'asc',
        renderParam: {
          layout: {
            visibility: 'visible',
            'line-cap': 'butt',
            'line-join': 'miter',
          },
          paint: {
            'line-blur': 0,
            'line-width': 5,
            'line-gap-width': 0,
            'line-opacity': 100,
            'line-dasharray': [],
          },
        },
      },
    },
  },
  polygon: {
    singleValueRender: {
      singleValueRender: {
        layout: {
          visibility: 'visible',
        },
        paint: {
          'fill-color': '#efc325',
          'fill-opacity': 100,
          'fill-outline-color': '#000000',
        },
      },
    },
    uniqueValueRender: {
      uniqueValueRender_random: {
        colorRamp: 'random',
        renderField: '',
        renderParam: {
          layout: {
            visibility: 'visible',
          },
          paint: {
            'fill-opacity': 100,
            'fill-outline-color': '#000000',
          },
        },
      },
    },
    hierarchicalRender: {
      hierarchicalRender_color: {
        colorRamp: 'gradual_ramp_red',
        renderField: '',
        hierarchicalMethod: 'hierarchical_color',
        level: 3,
        renderParam: {
          layout: {
            visibility: 'visible',
          },
          paint: {
            'fill-opacity': 100,
            'fill-outline-color': '#000000',
          },
        },
      },
    },
    gradualValueRender: {
      gradualValueRender_asc: {
        colorRamp: 'gradual_ramp_green',
        renderField: '',
        sort: 'asc',
        renderParam: {
          layout: {
            visibility: 'visible',
          },
          paint: {
            'fill-opacity': 100,
            'fill-outline-color': '#000000',
          },
        },
      },
    },
  },
  raster: {
    singleBandRasterRender: {
      hillshade: {
        band: 1,
        isShade: true,
        // type: "ramp",
        ramp: 'gray',
        shadeParams: {
          mode: 'hsv',
          azdeg: 315,
          altdeg: 45,
          vert_exag: 1,
        },
        paint: {
          'raster-opacity': 100,
          'raster-contrast': 0,
          'raster-resampling': 'linear',
          'raster-saturation': 0,
        },
      },
    },
  },
  label: {
    test: {
      renderField: '',
      renderParam: {
        layout: {
          visibility: 'visible',
          'text-font': ['Open Sans Semibold'],
          'text-size': 12,
          'text-allow-overlap': false,
          'text-ignore-placement': false,
          'text-anchor': 'center',
          'text-justify': 'center',
          'text-offset': [0, 0],
          'text-rotate': 0,
          'text-transform': 'none',
          'text-writing-mode': ['horizontal'],
          'symbol-placement': 'point',
        },
        paint: {
          'text-color': '#000000',
          'text-halo-color': '#ccefc2',
          'text-halo-blur': 0,
          'text-halo-width': 1,
          'text-opacity': 100,
        },
      },
    },
  },
};

// 后续数据库存储的组织方式，扁平化列表存储，通过唯一id查询
// const styleTemplates2 =
//   [
//     {
//       id: "1",
//       name: "singleValueRender",
//       renderType: "uniqueValueRender",
//       categoryType: "point",
//       params: {
//         layout: {
//           'visibility': 'visible'
//         },
//         outline: "closed",
//         paint: {
//           "circle-blur": 0,
//           "circle-color": "#ff0000",
//           "circle-radius": 10,
//           "circle-opacity": 100,
//         },
//       }
//     },
//     {
//       id: "2",
//       name: "singleValueRender_outline",
//       renderType: "singleValueRender",
//       categoryType: "point",
//       params: {
//         layout: {
//           'visibility': 'visible'
//         },
//         outline: "open",
//         paint: {
//           "circle-blur": 0,
//           "circle-color": "#8cff00",
//           "circle-radius": 10,
//           "circle-opacity": 100,
//           "circle-stroke-color": '#ff0000',
//           "circle-stroke-width": 5,
//           "circle-stroke-opacity": 100
//         },
//       }
//     },
//     {
//       id: "3",
//       name: "uniqueValueRender_random",
//       renderType: "singleValueRender",
//       categoryType: "point",
//       params: {
//         colorRamp: 'ramp1',
//         renderField: '',
//         renderParam: {
//           layout: {
//             'visibility': 'visible'
//           },
//           outline: "closed",
//           paint: {
//             "circle-blur": 0,
//             "circle-radius": 10,
//             "circle-opacity": 100,
//           },
//         }
//       }
//     },
//     {
//       id: "4",
//       name: "hierarchicalRender_color",
//       renderType: "hierarchicalRender",
//       categoryType: "point",
//       params: {
//         colorRamp: 'gradual_ramp1',
//         renderField: '',
//         hierarchicalMethod: 'hierarchical_color',
//         level: 3,
//         renderParam: {
//           layout: {
//             'visibility': 'visible'
//           },
//           outline: "closed",
//           paint: {
//             "circle-blur": 0,
//             "circle-radius": 10,
//             "circle-opacity": 100,
//           },
//         }
//       }
//     },
//     {
//       id: "5",
//       name: "hierarchicalRender_radius",
//       renderType: "hierarchicalRender",
//       categoryType: "point",
//       params: {
//         renderField: '',
//         hierarchicalMethod: 'hierarchical_circle-radius',
//         level: 3,
//         radiusRange: [4, 10],
//         renderParam: {
//           layout: {
//             'visibility': 'visible'
//           },
//           outline: "closed",
//           paint: {
//             "circle-color": "#ff0000",
//             "circle-blur": 0,
//             "circle-opacity": 100,
//           },
//         }
//       }
//     },
//     {
//       id: "6",
//       name: "gradualValueRender_asc",
//       renderType: "gradualValueRender",
//       categoryType: "point",
//       params: {
//         colorRamp: 'gradual_ramp1',
//         renderField: '',
//         sort: 'asc',
//         renderParam: {
//           layout: {
//             'visibility': 'visible'
//           },
//           outline: "closed",
//           paint: {
//             "circle-blur": 0,
//             "circle-radius": 10,
//             "circle-opacity": 100,
//           },
//         }
//       }
//     }
//   ]

export default styleTemplates;
